<template>
  <view class="login-container">
    <view class="login-title">迪尔化工填料</view>
    <view class="login-form">
      <input type="text" v-model="account" placeholder="请输入用户名" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
import api from "@/common/utils/api"; //接口
import md5 from "js-md5"; // 引入 js-md5

export default {
  data() {
    return {
      account: "",
      password: "",
    };
  },
  methods: {
    handleLogin() {
       // 验证用户名和密码是否输入
      if (!this.account) {
        uni.showToast({
          title: "请输入用户名",
          icon: "none"
        });
        return;
      }
      if (!this.password) {
        uni.showToast({
          title: "请输入密码",
          icon: "none"
        });
        return;
      }
      // 这里可以添加登录逻辑，例如调用 API 进行验证
      console.log("登录信息:", this.account, this.password);
      api
        .handleLogin({
          account: this.account,
          password: md5(this.password),
        })
        .then((res) => {
          if (res.success) {
            uni.hideLoading();
            uni.showToast({
              title: "登录成功！",
              icon: "none",
              mask: true,
            });
            uni.setStorageSync("token", res.data.Token);
            uni.setStorageSync("userInfo", res.data.UserInfo);
            setTimeout(function () {
              const pages = getCurrentPages();
              if (pages.length > 1) {
                // 存在上一个页面，返回上一页
                uni.navigateBack();
              } else {
                // 没有上一个页面，跳转到首页
                uni.navigateTo({ url: "/pages/home/index" });
              }
            }, 1000);
          }
        })
        .finally((e) => {});
    },
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("@/assets/imgs/bg.png");
  background-size: cover;
  background-position: center;
}
.login-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #00796b;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.login-form {
  width: 80%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.login-form:hover {
  transform: translateY(-5px);
}
input {
  width: 95%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}
input:focus {
  border-color: #00796b;
}
.login-btn {
  width: 100%;
  margin-top: 20px;
  /* padding: 10px; */
  background-color: #00796b;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  height: 44px;
  line-height: 44px;
}
/* button:hover {
  background-color: #004d40;
} */
</style> 